<ng-container *ngIf="!outlet.isActivated">
    <ts-datepicker #datepickerOne="tsDatepicker" [(ngModel)]="search.params.start" [color]="global.params.color" [weekTitles]="['一', '二', '三', '四', '五', '六', '日']"
        [monthTitles]="['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']">
    </ts-datepicker>
    <ts-datepicker #datepickerTwo="tsDatepicker" [(ngModel)]="search.params.end" [color]="global.params.color" [weekTitles]="['一', '二', '三', '四', '五', '六', '日']"
        [monthTitles]="['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']">
    </ts-datepicker>
    <div class="bg-white pr-3 pl-3">
        <h4>订单列表</h4>
        <ts-tabs [tabs]="['全部订单','待发货','已发货','已完成']" [color]="global.params.color" activeTab="全部订单" (tabChange)="changeSearchStatus($event)">
        </ts-tabs>
    </div>
    <div class="p-2">
        <div class="card">
            <div class="card-body">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">订单号</span>
                    </div>
                    <input [(ngModel)]="search.params.sn" type="text" class="form-control" placeholder="请输入商品名称关键词">
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text bg-white">收货人</span>
                    </div>
                    <input [(ngModel)]="search.params.consignee" type="text" class="form-control" placeholder="请输入关键词">
                </div>
                <div class="input-group mt-2">
                    <div class="input-group-prepend">
                        <span class="input-group-text bg-white">下单时间</span>
                    </div>
                    <input tsToggle [bind]="datepickerOne" [target]="datepickerOne" [value]="search.params.start" type="text" class="form-control bg-white pointer"
                        placeholder="开始时间" readonly>
                    <div class="input-group-prepend input-group-append">
                        <span class="input-group-text bg-white">到</span>
                    </div>
                    <input tsToggle [bind]="datepickerTwo" [target]="datepickerTwo" [value]="search.params.end" type="text" class="form-control bg-white pointer"
                        placeholder="结束时间" readonly>
                </div>
                <div class="row mt-2 mb-2 m-btn">
                    <div class="col-6">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-white">共查询到</span>
                            </div>
                            <input type="text" value="{{pagination.total}}" class="form-control text-center bg-white" readonly placeholder="0">
                            <div class="input-group-append">
                                <span class="input-group-text bg-white">条/结果</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 text-right">
                        <button (click)="doReset()" class="btn btn-white">
                            <i class="fa fa-refresh fa-fw"></i>
                            <span>重置</span>
                        </button>
                        <button (click)="doSearch()" class="btn btn-white">
                            <i class="fa fa-search fa-fw"></i>
                            <span>搜索</span>
                        </button>
                    </div>
                </div>
                <div>
                    <ts-table-load [display]="loading"></ts-table-load>
                    <table class="table table-bordered border-0">
                        <thead>
                            <tr class="bg-light">
                                <th class="border-0" scope="col">商品</th>
                                <th class="border-0" scope="col">买家</th>
                                <th class="border-0" scope="col">配送信息</th>
                                <th class="border-0" scope="col">价格</th>
                                <th class="border-0" scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let item of list">
                                <tr class="border-top-space"></tr>
                                <tr class="card-header table-light">
                                    <td colspan="5">
                                        <span *ngIf="item.orderStatus===0" class="badge badge-danger badge-pill">已取消</span>
                                        <span *ngIf="item.orderStatus===1" class="badge badge-secondary badge-pill">待付款</span>
                                        <span *ngIf="item.orderStatus===2" class="badge badge-info badge-pill">待发货</span>
                                        <span *ngIf="item.orderStatus===3" class="badge badge-primary badge-pill">已发货</span>
                                        <span *ngIf="item.orderStatus===4" class="badge badge-success badge-pill">已完成</span>
                                        <span>{{item.createdAt}}</span>
                                        <span class="text-muted">订单编号: {{item.orderSn}}</span>
                                    </td>
                                </tr>
                                <tr class="card-body">
                                    <td>
                                        <div class="media" *ngFor="let goods of item.goodsList">
                                            <img tsImg alt="Avatar" class="align-self-center mr-3" dataSrc="assets/images/404.jpg" [src]="goods.goodsThumb" height="60"
                                                width="60">
                                            <div class="media-body">
                                                <p class="m-0">{{goods.goodsName}}</p>
                                                <p class="m-0 text-muted">
                                                    <small>
                                                        ￥{{goods.goodsPrice}}
                                                        <br> x{{goods.goodsQuantity}}
                                                    </small>
                                                </p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{item.user.nick}}</td>
                                    <td>
                                        {{item.address}}
                                        <br> {{item.phone}}&nbsp;{{item.consignee}}
                                    </td>
                                    <td>{{item.orderTotalPrice}}</td>
                                    <td>
                                        <button routerLink="detail/{{item.id}}" class="btn btn-link">查看详情</button>
                                    </td>
                                </tr>
                            </ng-container>
                        </tbody>
                    </table>
                </div>

                <div class="text-right">
                    <ts-pagination (pageChange)="loadDatas()" [pagination]="pagination" [items]="[{text:'显示 5 条',value:5},{text:'显示 10 条',value:10},{text:'显示 20 条',value:20}]"
                        [color]="global.params.color" goTitle="跳转" prevTitle="上一页" nextTitle="下一页" startTitle="首页" endTitle="末尾"
                        outline></ts-pagination>
                </div>
            </div>
        </div>
    </div>
</ng-container>
<router-outlet #outlet="outlet"></router-outlet>